<template>
    <div class="page">
        <div class="title-view">票据回购与转贴报价</div>
        <select-date class="date-select-box" v-model="dateRange"/>

        <table-view class="table-view" :labels="labels" :data="data" request-btn="点击加载全部"/>

        <div class="title-text">票据回购与转贴报价曲线</div>

        <div class="grade-view">
            <radio-box title="评级" :items="items" v-model="itemActive"/>
            <radio-box title="期限" :items="yearItems" v-model="yearItemsActive"/>
            <div class="search-btn">查询</div>
            <div class="description">图由历史各期限评级的估值连点而成，可选择起止日期区间以选择数据显示范围，点击“查询”查看非金融企业债务融资工具定价估值曲线图。</div>
        </div>

        <div class="line-view-box"></div>

    </div>
</template>

<style lang="less" scoped>

    @import '../../style/variable';

    .page{
        .title-view{
            padding-top: 1.2rem;
            text-align: center;
        }

        .date-select-box{
            margin: 1rem 0;
        }

        .table-view{
            border-bottom: .8rem solid @color-bg-gray;
        }

        .title-text{
            line-height: 4.5rem;
            text-align: center;
        }

        .grade-view{
            border-top: 1px solid @color-line-gray;

            .search-btn{
                line-height: 3.8rem;
                width: 12rem;
                background-color: @app-color;
                color: @color-white;
                border-radius: .3rem;
                text-align: center;
                margin: 1.5rem auto;
            }

            .description{
                font-size: 1.1rem;
                line-height: 1.5rem;
                padding: 0 1.5rem 2rem;
                color: @color-text-gray;
            }
        }

        .line-view-box{
            border-top: 1px solid @color-line-gray;
            border-bottom: .8rem solid @color-bg-gray;
        }
    }
</style>

<script>
    export default {
        data(){

            const items = Array(5).fill('AAA');
            const yearItems = Array(8).fill('').map((o, k)=> 1+k + '年');

            const labels = [
                {
                    label: '信用等级',
                    key: 'label',
                    width: 88
                },
                {
                    label: '1年',
                    key: 'year1',
                    width: 200
                },
                {
                    label: '3年',
                    key: 'year3',
                    width: 200
                },
                {
                    label: '5年',
                    key: 'year5',
                    width: 200
                },
                {
                    label: '7年',
                    key: 'year7',
                    width: 200
                },
                {
                    label: '10年',
                    key: 'year10',
                    width: 200
                }
            ];

            const data = Array(4).fill({
                label: 'AAA',
                year1: 4.4,
                year3: 4.4,
                year5: 4.,
                year7: 4.4,
                year10: 4.4,
            });

            return {
                dateRange: ['2018-09-09'],
                items,
                itemActive: 0,
                yearItems,
                yearItemsActive: 0,
                labels,
                data
            }
        }
    }
</script>